<template>
  <div>
    <el-dialog
      :title="this.$t('common.details')"
      :visible.sync="Visible"
      width="100%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.customer')}}1:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.username"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.line')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.line_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Delivery_location')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.start_local_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.destination')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.target_local_name"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="this.recive_data.is_show===1">
          <div class="dialogBoxTitle">{{this.recive_data.name}}</div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in this.recive_data.list" :key="k">
              <div class="title">
                <div v-if="el.is_require===1" class="RequiredRowTip">*</div>
                {{el.name}}:
              </div>
              <div class="contant">
                <el-input
                  v-if="el.type===1"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  disabled
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  disabled
                  v-model="el.val">
                </el-input-number>
                <el-input
                  v-if="el.type===4||el.type===6"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-select
                  v-if="el.type===5&&el.item_id==='dispatch_type'"
                  disabled
                  v-model="el.val"
                >
                  <el-option
                    v-for="item in options_Delivery"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-if="el.type===5&&el.item_id==='contact_name'"
                  disabled
                  v-model="el.val"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="this.pickup_data.is_show===1">
          <div class="dialogBoxTitle">{{this.pickup_data.name}}</div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in this.pickup_data.list" :key="k">
              <div class="title">
                <div v-if="el.is_require===1" class="RequiredRowTip">*</div>
                {{el.name}}:
              </div>
              <div class="contant">
                <el-input
                  v-if="el.type===1"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  disabled
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  disabled
                  v-model="el.val">
                </el-input-number>
                <el-input
                  v-if="el.type===4||el.type===6"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-select
                  v-if="el.type===5&&el.item_id==='pickup_type'"
                  disabled
                  v-model="el.val"
                >
                  <el-option
                    v-for="item in options_take"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="this.goods_data.is_show===1">
          <div class="dialogBoxTitle">{{this.goods_data.name}}</div>
          <MyTable
          :tableColumn="tableColumn_goods"
          :tableData="tableData_goods"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div v-if="is_show_insure" class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Insurance_Information')}}</div>
          <div v-if="is_show_insure" class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.buy_insurance')}}:
              </div>
              <div class="contant">
                <el-switch
                  disabled
                  v-model="data.is_insure"
                  :active-value="0"
                  :inactive-value="1"
                  active-color="#26BD00"
                  >
                </el-switch>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Insured_price')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="premium_min" 
                  :precision="2"
                  :max="premium_max"
                  v-model="data.insure_price">
                </el-input-number>
              </div>
            </div>
            <!-- <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Guarantee_rate')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="0"  
                  :precision="2"
                  v-model="data.premium_rate">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="0"  
                  v-model="data.insure_costs">
                </el-input-number>
              </div>
            </div> -->
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Freight_information')}}</div>
          <div class="dialogBoxItem">
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Weight_measurement')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_calweight">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Volume_measurement')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_cal_volume">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.freight')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_trans_price">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.discount')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.discount">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.discount_Freight')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_trans_discount_price">
                </el-input-number>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.insure_costs">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.service_charge')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_survey_price">
                </el-input-number>
                <div style="margin-left:5px;white-space:nowrap;color:#62afff;cursor:pointer;" @click="details">{{$t('common.details')}}</div>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Pre_discount_expenses')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.bill_total_price">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Discounted_fees')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  v-model="data.total_price">
                </el-input-number>
              </div>
            </div>
            <div style="width:19%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Payment_type')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.line_pay_type_name"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Package_information')}}</div>
          <div style="margin:5px 0;">
            <span>{{$t('ExpressOrderManagementLang.Number_packages')}}：</span>
            <el-input-number
              disabled
              style="width:100px"
              controls-position="right"
              size="small" 
              :min="0"  
              v-model="premium_num">
            </el-input-number>
          </div>
          <MyTable
            :tableColumn="tableColumn_packages"
            :tableData="tableData_packages"
            :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_remarks')}}</div>
          <div class="dialogBoxItem">
            <div style="width:100%;" class="dialogBoxItemRow">
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.remark"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <ServiceFee
      ref="serviceFee"
    ></ServiceFee>
  </div>
</template>

<script>
import ServiceFee from "./ExpressDeliveryOrderManagement_issueAccounts_ServiceFee";
export default {
  components: {ServiceFee},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      order_sn:'',
      lid:'',
      yes_out_bill:'',
      data:{
      },
      options_Delivery:[],
      options_take:[],
      is_show_insure:false,//是否可以买保险
      compensation_max:0,//赔付货值最大值
      premium_min:0,//保险费最小值
      premium_max:0,//保险费最大值
      goods_data:{},//商品配置项
      pickup_data:{},//提货信息配置项
      recive_data:{},//收货信息配置项
      ServiceFeeList:[],//服务费列表
      tableColumn_goods: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Product_Name'),
          prop: "goods_name",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.commodity_value'),
          prop: "goods_price",
          width: 120,
          templateType:'InputNumber',
          precision:2,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Quantity_goods'),
          prop: "goods_num",
          width: 120,
          templateType:'InputNumber',
          precision:0,
        },
        
      ],
      tableData_goods: [],
      sendDataObj_goods:{},
      tableColumn_packages: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Whether_issue_account'),
          prop: "out_bill_status_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Whether_pay_not'),
          prop: "pay_status_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Transportation_status'),
          prop: "trans_status_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Package_number'),
          prop: "package_sn",
          width: 250,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Express_Number'),
          prop: "express_sn",
          width: 200,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Gross_weight'),
          prop: "gross_weight",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Weight_measurement'),
          prop: "weight",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.long'),
          prop: "length",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.wide'),
          prop: "width",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.high'),
          prop: "height",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.volume'),
          prop: "volume",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Volume_measurement'),
          prop: "cal_volume",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Freight_type'),
          prop: "freight_category_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Bubble_weight'),
          prop: "weight_calc_rule",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Freight_unit_price'),
          prop: "freight_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Whole_price'),
          prop: "whole_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ActiveConfigurationLang.Discount_amount'),
          prop: "deduction_amount",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.freight'),
          prop: "freight_cost",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.remarks'),
          prop: "remarks",
          width: 120,
        },
      ],
      tableData_packages: [],
      sendDataObj_packages:{},
      premium_num:0,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.order_sn=data.order_sn
      this.lid=data.lid
      this.getData();
      this.Visible = true;
    },
    details(){
      let arr=this.tableData_packages.filter(item=>{return !!item.checked})
      this.$refs.serviceFee.init(this.ServiceFeeList,this.lid,arr,true)
    },
    //获取单条
    getData() {
      this.$get("orderInfo", { order_sn: this.order_sn,lid: this.lid }).then((res) => {
        this.data = res.data;
        this.ServiceFeeList = res.data.bill_services;
        this.ServiceFeeList.forEach((el,k)=>{
          el.table_code=k+1
        })
        this.options_Delivery =res.data.lines[0].dispatch_type_arr
        this.options_take =res.data.lines[0].pickup_type_arr
        this.is_show_insure=res.data.line_info.is_insure==0
        this.compensation_max=Number(res.data.compensation_max)
        this.premium_min=Number(res.data.line_info.premium_min)
        this.premium_max=Number(res.data.line_info.premium_max)



        this.tableData_goods=res.data.goods

        this.$get("getItemsByLid", { lid: this.lid}).then((res) => {
            if(!!res.data.goods_info&&res.data.goods_info.list.length>0){
            this.goods_data=res.data.goods_info
            this.tableColumn_goods=[
              {
                label: "",
                prop: "table_code",
                width:40,
              },
            ]
            this.goods_data.list.forEach(item=>{
              let obj={}
              if(item.type===1){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'Input',
                  text_scale:Number(item.text_scale),
                }
              }else if(item.type===2){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'DatePicker',
                }
              }else if(item.type===3){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'InputNumber',
                  precision:Number(item.scale),
                }
                }else if(item.type===4||item.type===6){
                obj={
                  checked: true,
                  label: item.name,
                  prop: item.item_id.toString(),
                  width: item.width,
                  templateType:'InputScale',
                  text_scale:Number(item.text_scale),
                }
              }
              this.tableColumn_goods.push(obj)
            })
          }
          if(!!res.data.pickup_info&&res.data.pickup_info.list.length>0){
            this.pickup_data=res.data.pickup_info
            if(this.data.pickup_information.length>0){
              this.pickup_data.list.forEach(el=>{
                this.data.pickup_information.forEach(ite=>{
                  if(el.item_id==ite.id){
                    el.val=ite.val
                  }
                })
              })
            }
          }
          if(!!res.data.recive_info&&res.data.recive_info.list.length>0){
            this.recive_data=res.data.recive_info
            if(this.data.recive_information.length>0){
              this.recive_data.list.forEach(el=>{
                this.data.recive_information.forEach(ite=>{
                  if(el.item_id==ite.id){
                    el.val=ite.val
                  }
                })
              })
            }
          }
          });
        this.$get("billPackages", { order_sn: this.order_sn,lid: this.lid }).then((res) => {
          this.tableData_packages=res.data
          this.premium_num=res.data.length
        });
      });
    },
    //取消修改
    cancel() {
      this.data={}
      this.premium_num=0
      this.options_Delivery=[],
      this.options_take=[],
      this.tableData_goods=[]
      this.tableData_packages=[] 
      this.is_show_insure=false
      this.goods_data={}
      this.pickup_data={}
      this.recive_data={}
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 24%;
    }
  }
</style>